<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="/RjdaoIcon_style.css">
	<link rel="stylesheet" href="/login.css">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>

	
	<meta charset="utf-8" />
	<title></title>
	<style>
		#box {
			width: 61.2rem;
			height: 108.6rem;
			background: url("/login.jpg") no-repeat;
			background-size: 100% 100%;
			background-attachment: fixed;
			opacity: 0.7;
		}
		#message{
			font-size:20px;
			color:red;
		}
	</style>
</head>

<body>
	<div id="app">
		<div id="box">
			<div id="les">
				<transition mode="out-in">
					<router-view></router-view>
				</transition>
				<div id="wu">
				<router-link to="/login">登陆</router-link>
				<router-link to="/res">注册</router-link>
				
			</div>
			</div>
		</div>
	</div>
	<template id="login">
		<div>
		<form action="./ulogin1"  method="post" >
				<label>
					<div id="ico"><i class="icon-0110"></i>
					<i class="icon-0129"></i></div>
					<input type="text" class="form-control" placeholder="请输入账号: " id="password" name="usercode"/><br>
					<input type="password" class="form-control" placeholder="请输入密码: " id="user" name="password"><br>
					<button class="btn btn-primary">登陆</button>
				</label>
			</form>
		</div>
	</template>
	<template id="res">
		<div>
			<form action="./uregister1"  method="get">
				<label>
				
					    <div id="ico">
					    <i class="icon-0110"></i>
						<i class="icon-0129"></i>
						</div>
						
					    <input type="text" class="form-control" required="required" placeholder="请输入账号: " id="password" name="usercode" onblur="ajaxValidate()"/><br>
					    <input type="password" class="form-control" required="required" placeholder="请输入密码: " id="user" name="password"><br>
					    <input type="text" class="form-control" required="required" placeholder="请输入姓名: " id="user" name="name"><br>
						<button class="btn btn-primary">注册</button>

				</label>
			</form>
		</div>

	</template>
</body>

</html>
<script>

	var login = { 
		template: "#login"
	}
	var res = {
		template: "#res"
	}
	var router = new VueRouter({
		routes: [
			{ path: '/', component: login },
			{ path: '/login', component: login },
			{ path: '/res', component: res }
		]
	});
	var vm = new Vue({
		el: "#app",
		data: {
	
		},
		router
	});
	
	function ajaxValidate() {
	    var usercode=$("#password").val();
	    $.ajax({
	        type:"POST",
	        url:"/check",
	        data:{"usercode":usercode},
	        dataType:"text",
	        
	        success:function(data){
	        	if(data === 'ok'){
	        		$("#message").html("可以使用");
	        	}else{
	                alert("账号已经被注册！");
	        	}
	        },
	        error: function(xhr){
	        	console.log(arguments)
	        	console.log("请求出错了！！！");
	        }
	    });
	}
</script>